<!-- 多选 -->
<template>
	<view class="card">
		<view class="name">
			{{ result.topic.MultiSelect.name }}
		</view>
		<text class="info">{{ result.topic.MultiSelect.describe }}</text>
		<view class="top">
			<view @click="breakClick">
				<image src="@/static/break.png" mode=""></image>
				上一题
			</view>
			<text>{{ questionIndex + 1 }}/ {{ result.topic.MultiSelect.number }}</text>
			<view @click="nextClick">
				下一题
				<image src="@/static/next.png" mode=""></image>
			</view>
		</view>
		<view class="cardBody" v-for="(item,index) in result.topic.MultiSelect.question" :key="item.id"
			v-show="index === questionIndex">
			<view class="topic">
				{{ item.title }}
			</view>
			<!--  选项应为for循环  -->
			<view class="options"
				:class="result.answer.MultiSelect.result[index].answer.split(',').indexOf(inx) !== -1 ? 'success' : ''"
				v-for="(ite,inx) in item.options" :item="inx" @click="optionsClick(inx,item.id,index)">
				<text style="margin-left: 10px; margin-right: 15px;">{{ inx }}</text>
				<text>{{ ite }}</text>
			</view>
			<button @click="nextClick"  style="margin-top: 20rpx;color:#fff"  v-if="!result.wrong">完成</button>
		</view>
	</view>
	<view v-if="result.wrong">
		<!-- 错误信息 -->
		<view class="error" v-for="(item,index) in result.topic.MultiSelect.question" :key="item.id"
			v-show="index === questionIndex" style="padding: 10px;">
			<!-- 		<view class="top">
				<image src="@/static/error.png" mode=""></image>
				答题错误
			</view> -->
			<view class="answer">
				<view class="">
					正确答案:
					<text class="text">{{ item.standard_answer }}</text>
				</view>
				<view class="border">
					您选择的答案:
					<text class="text textSuccess">{{ item.answer === '' ? '无' : item.answer }}</text>
				</view>
			</view>
			<view class="answerBottom">
				<view style="width: 100%;;display: flex;justify-content: space-between;">
					<text>参考解析</text>
					<view style="display: flex;">难度:
						<uni-rate v-model="rateValue" @change="onChange" />
					</view>
				</view>
				<view style="margin-top: 20px;font-size: 25px;font-weight: 700;">
					{{ item.parsing === '' ? '暂无' : item.parsing }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		exam
	} from '@/stores/exam.js';
	import {
		log
	} from 'console';
	export default {
		props: ['index'],
		data() {
			return {
				questionIndex: 0,
				success: [], // 多选题每个题的选项
				result: ''
			};
		},
		watch: {
			index(o, n) {
				console.log('多选',o)
				this.questionIndex = o;
			}
		},
		created() {
			this.result = exam();
		},
		methods: {
			init() {
				this.questionIndex = this.index
			},
			initMax(){
				this.questionIndex = this.result.topic.MultiSelect.question.length - 1
			},
			// 上一题
			breakClick() {
				if (this.questionIndex > 0) {
					this.questionIndex -= 1;
				} else if (this.questionIndex === 0) {
					this.$emit("multiSelect", 'break');
				}
				this.success = [];
			},
			// 下一题
			nextClick() {
				if (this.questionIndex < this.result.topic.MultiSelect.question.length - 1) {
					this.questionIndex += 1;
				} else {
					this.$emit("multiSelect", 'next');
				}
				this.success = [];
			},
			// nextClick() {
			//   const currentTopic = this.result.topic.MultiSelect; // 获取当前题型
			//   if (this.questionIndex < currentTopic.question.length - 1) {
			//     // 如果当前题型还有下一题，将 questionIndex 加 1
			//     this.questionIndex += 1;
			//   } else {
			//     const nextTopic = this.result.topic.FillInBlanks; // 获取下一个题型
			//     if (nextTopic.question.length > 0) {
			//       // 如果下一个题型存在至少一道题，将 questionIndex 设置为下一个题型的第一道题的索引
			//       this.questionIndex = 0;
			//       this.result.topicIndex += 1;
			//       this.result.topic = nextTopic;
			//     } else {
			//       // 如果下一个题型不存在任何题目，将视为答题已完成
			//       this.$emit("singleSelect", 'next');
			//     }
			//   }
			//   	this.success = [];
			// },
			// 选项点击事件
			optionsClick(inx, id, index) {
				if (!this.result.wrong) {
					this.success = this.result.answer.MultiSelect.result[index].answer.split(',');
					this.success.forEach((item, index) => {
						if (item === "") {
							this.success.splice(index, 1);
						}
					})
					if (this.success.indexOf(inx) === -1) {
						this.success.push(inx);
					} else {
						this.success.forEach((item, index) => {
							if (item === inx) {
								this.success.splice(index, 1);
							}
						})
					}
					// 判断q_id 是否相同 相同则添加答案
					if (this.result.answer.MultiSelect.result[index].q_id === id) {
						this.result.answer.MultiSelect.result[index].answer = this.success.join(',')
					}
				}
				console.log(this.result.answer.MultiSelect.result[index])
			}
		}
	};
</script>

<style scoped lang="scss">
	.border {
		border-left: 1px solid $uni-border-color;
	}

	.text {
		font-size: 20px;
		color: $uni-color-error;
	}

	.textSuccess {
		color: $uni-color-primary;
	}

	.answer {
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			background-color: #fff;
			width: 50%;
			text-align: center;
			padding: 15px;
			padding-bottom: 0;

			text {
				display: block;
				padding: 20px;
			}
		}
	}

	.error {
		border-radius: 10px;

		.answerBottom {
			border-top: 1px solid $uni-border-color;
			box-sizing: border-box;
			padding: 20px;
			width: 100%;
			background-color: #fff;
		}

		padding: 20px;
		padding-top: 10px;

		.top {
			width: 100px;
			border-radius: 10px;
			display: flex;
			justify-content: left;
			align-items: center;
			background-color: $uni-color-error;
			padding: 10px;
		}

		image {
			margin-right: 5px;
			width: $uni-img-size-sm;
			height: $uni-img-size-sm;
		}
	}

	.success {
		border-radius: 5px;
		background-color: #2aae67;
		border: #2aae67 2px solid;
		margin-top: 10px;
		padding: 15px;
		color: #fff;
		padding-left: 0;
	}

	.card {
		font-size: 18px;
		border-radius: 5px;
		margin: 10px;
		background-color: #fff;

		.name {
			width: 100%;
			height: 30px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 19px;
			margin-bottom: 5px;
			margin-top: 5px;
		}

		.info {
			display: block;
			width: 100%;
			text-align: center;
		}

		.top {
			padding: 20px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 30px;
				vertical-align: middle;
				height: 20px;
			}

			border-top: #e9e9e9 solid 2px;
			border-bottom: #e9e9e9 solid 2px;
			margin-top: 10px;
		}

		.cardBody {
			padding: 20px;
		}

		.options {
			border-radius: 5px;
			border: #e1e1e1 1px solid;
			margin-top: 20px;
			padding: 15px;
			padding-left: 15px;
		}
	}
</style>
